<template>
  <div>
    <div style="margin-top: 10px; margin-bottom: 20px">
      <el-input
          v-model="code"
          size="default"
          placeholder="想要查询的商品代码"
          style="width: 200px"
      />
      <el-button type="primary" style="margin-left: 10px" @click = "search">查询</el-button>
    </div>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style=" width: 100%"
          height="542px"
      >
        <el-table-column type="index" :index="getIndex" width="300px" label="序号"/>
        <el-table-column prop="code" width="300px" label="商品代码"/>
        <el-table-column prop="inventoryName" width="300px" label="商品名称"/>
        <el-table-column prop="num" width="300px" label="库存数量"/>
        <el-table-column prop="warehouseId" width="270px" label="所属库房编号"/>
      </el-table>
      <el-pagination
          background
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          layout="total, prev, pager, next"
          :total=totalSize
          @current-change="pageChange"
          style="margin-top: 15px"
          :current-page=pageNow
      >
      </el-pagination>
    </el-scrollbar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "InventoryList",
  data(){
    return {
      code:'',//要查找的商品代码
      tableData:[
      ],
      pageSize:10,
      pageNow:0,
      totalSize:''
    }
  },
  methods:{
    // 加载库存表单数据
    loadPost(){
      axios.post("http://localhost:1050/inventory/showAllInventory",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        this.pageNow = 1
        res = res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },

    // 根据选择框和输入框的属性查找对应的库存商品
    search(){
      console.log(this.code)
      axios.post("http://localhost:1050/inventory/queryInventoryInfo",{
        code:this.code,
        pageSize:this.pageSize,
        pageNow:this.pageNow - 1
      }).then(res=>{
        res = res.data
        if (res.code == '200') {
          console.log(res.data)
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },

    //翻到下一页
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      axios.post("http://localhost:1050/inventory/showAllInventory",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },

    // 自动得到index
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
  },

  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>

</style>